<template>
	<view>
		<div style="height: 50rpx;background:#fff"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('绑定申请')}}
			</div>
		<view class="invited_items">
			<view class="invited_item">
				<view class="title">
				{{$t('申请人')}}
				</view>
				<view class="info_text">
					<input class="info_input" v-model="remarkName" disabled="true" />
				</view>
			</view>
			<view class="invited_item">
				<view class="title">
					{{$t('申请说明')}}
				</view>
				<view class="info_text">
					<u-textarea v-model="remarkValue" :customStyle="{background: '#F6F7FB'}" height="200rpx" border="none" placeholder="请输入您的情況..." ></u-textarea>
				</view>
			</view>
			<view class="invited_item">
				<text v-if="bind_item&&bind_item.bind"> {{$t('绑定申请')}}:{{bind_item.bind.username}}，{{$t('状态')}}:<text v-if="bind_item.status==1">{{$t('申请中')}}</text> <text v-if="bind_item.status==2">{{$t('已同意')}}</text>  <text v-if="bind_item.status==3">{{$t('已拒绝')}}</text></text>
			</view>
		</view>
		<view class="footer_btn1">
			<u-button type="primary"  class="btn customStyle" :text="bind_item?'重新提交申请':'提交申请'" :loading="submit_loading" :disabled="submit_loading" @click="submit_sub"></u-button>
		</view>
	</view>
</template>

<script>
	
	import { submit_bind} from '@/api/basic'
	import { business_info } from '@/api/user.js'
	
	export default {
		data() {
			return {
				remarkName:'',
				remarkValue:'',
				submit_loading:false,
				
				info:{},
				
				car_id:'',
				driver_id:'',
				
				bind_item:''
			}
		},
		onLoad(options) {
			this.find_info();			
			this.driver_id=options.id
			this.car_id=options.car_id
		},
		onShow() {
			
		},
		methods: {
			find_info(){
				var that = this
				business_info({
					user_id:uni.getStorageSync('user_id')
				}).then(res => {
					that.info = res.data.data
					that.remarkName = that.info.username
				})
			},
			back() {
				// uni.navigateBack()
				this.cback()
			},
			submit_sub(){
				this.submit_loading=true
				setTimeout(()=>{
					this.submit_loading=false
				},1000)
				let pickerForms={
					 service_user_id:this.driver_id,
					 car_id:this.car_id,
					 user_id:uni.getStorageSync('user_id'),
					 remark:this.remarkValue
				}
				uni.showModal({
				  title: this.$t('提示'),
				  content: this.$t('确定提交吗'),
				  success: function (res) {
					if (res.confirm) {
						submit_bind(pickerForms).then((res) => {
							if(res.data.code==200){
								uni.$emit('refreshIndex', true)
								uni.showToast({
									title:'操作成功'
								})
								setTimeout(function(){
									uni.navigateBack({
									  delta: 1,
									})
								},2000)
							}else{
								uni.showToast({
									title:res.data.message
								})
							}
						})
					} 
				  }
				});
			},
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
page{
		background-color: #F6F7FB;
	}
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background:#fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

	.customStyle{
		border: none;
	}
	.invited_items{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.invited_item{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 24rpx;
		padding:10rpx 0 30rpx;
		.ph{
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}
	}
	.footer_btn1{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		z-index: 9;
		padding:30rpx 30rpx 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		.btn{
			width: 100%;
			height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color:#fff;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight:500;
		}
		.text{
			width: 100%;
			height: 90rpx;
			color:#278AFF;
			text-align: center;
			line-height: 90rpx;
			font-size: 24rpx;
			font-weight: 400;
		}
	}
</style>
